Infinite Scroll

Infinite Scroll is a JavaScript plugin that automatically adds the next page, saving users from a full page load. You’ve likely seen it in use all over the web.

The original version of Infinite Scroll was first released by Paul Irish 2008. It was a break-through work of front-end development, granting web developers a cutting edge experience via a user-friendly yet powerful jQuery plugin. That lineage scrolls on to this day.

Install

Download

• infinite-scroll.pkgd.min.js minified, or
• infinite-scroll.pkgd.js un-minified

CDN

Link directly to Infinite Scroll files on unpkg.

<script src="https://unpkg.com/infinite-scroll@5/dist/infinite-scroll.pkgd.min.js"></script>
<!-- or -->
<script src="https://unpkg.com/infinite-scroll@5/dist/infinite-scroll.pkgd.js"></script>

Package managers

Install with npm: npm install infinite-scroll

Install with Yarn: yarn add infinite-scroll

Install with Bower: bower install infinite-scroll --save

License

Infinite Scroll v5 is licensed under the MIT License. Whereas earlier versions of Infinite Scroll were previously dual licensed for commercial and closed-source usage, Infinite Scroll v5 licensing no longer has this distinction. You are free to use Infinite Scroll v5 in commercial and closed-source applications.

Getting started

Include the Infinite Scroll .js file in your site.

<script src="/path/to/infinite-scroll.pkgd.min.js"></script>

Infinite Scroll works on a container element with item elements.

<div class="container">
  <article class="post">...</article>
  <article class="post">...</article>
  <article class="post">...</article>
  ...
</div>

There are several ways to initialize Infinite Scroll.

Initialize with jQuery

You can use Infinite Scroll as a jQuery plugin: $('selector').infiniteScroll().

$('.container').infiniteScroll({
  // options
  path: '.pagination__next',
  append: '.post',
  history: false,
});

Initialize with vanilla JavaScript

You can use Infinite Scroll with vanilla JS: new InfiniteScroll( elem ). The InfiniteScroll() constructor accepts two arguments: the container element and an options object.

let elem = document.querySelector('.container');
let infScroll = new InfiniteScroll( elem, {
  // options
  path: '.pagination__next',
  append: '.post',
  history: false,
});

// element argument can be a selector string
//   for an individual element
let infScroll = new InfiniteScroll( '.container', {
  // options
});

Initialize with HTML

You can initialize Infinite Scroll in HTML, without writing any JavaScript. Add data-infinite-scroll attribute to the carousel element. Options can be set in its value.

<div class="container"
  data-infinite-scroll='{ "path": ".pagination__next", "append": ".post", "history": false }'>

Next

• Options
• API

Features

Versatile UI

Rather load with a button than use scrolling? Got it. What about scrolling a couple pages, then using a button? Got that. Or load with your own specific logic? Yup.

1a

1b

1c

1d

End of content

No more pages to load

View more

Edit this demo or vanilla JS demo on CodePen

Masonry, Isotope, & Packery

Masonry, Isotope, & Packery layouts plug right into Infinite Scroll. These features combine to create a rich visual grid for wandering eyes.

End of content

No more pages to load

Edit this demo or vanilla JS demo on CodePen